<template>
	<view>
		<view class="banner">
			<u-swiper height="450" :list="bannerList"></u-swiper>
		</view>
		<!-- 奶站 -->
		<view class="milk-station">
			<view class="t fcs">
				<view class="l">
					奶站名称
				</view>
				<view class="r">
					已售:5000瓶
				</view>
			</view>
			<view class="b fcs">
				<view class="l">
					今日下单预计2天后2024-6-20送达
				</view>
				<view class="r img">
					<image class="img" src="@/static/img/Share.png" mode="heightFix"></image>
				</view>
			</view>
		</view>
		<!-- 商品 -->
		<scroll-view class="goods" scroll-x>
			<view class="item" v-for="(item, index) in 10" :key="index" @click="chooseGoodsIndex = index" :style="{ 'backgroundColor': chooseGoodsIndex == index ? '#F3060D' : '' }">
				<image class="img" src="https://img.js.design/assets/img/668c9ee084a543139ecb06cb.jpg#4daecb55af26b59c4ba5893a9ca94283" mode=""></image>
				<view class="title u-line-1" :style="{ color: chooseGoodsIndex == index ? '#FFFFFF' : '#A6A6A6' }">
					商品1
				</view>
			</view>
		</scroll-view>
		<!-- 配送信息 -->
		<view class="distribution">
			<view class="item fcs" v-for="(item, index) in distribution" :key="index">
				<view class="l">
					{{ item.label }}
				</view>
				<view class="r">
					<view class="fcc" v-if="item.type == 'address'" :class="[item.type]">
						<image class="img" src="@/static/img/position.png" mode="widthFix"></image>
						<text class="t">辽宁省沈阳市铁西区大马路30号</text>
						<u-icon name="arrow-right" size="24"></u-icon>
					</view>
					<view v-else-if="item.type == 'button'" class="fcc" :class="[item.type]">
						<u-button size="mini" v-for="(b, bi) in item.button" :key="bi" :customStyle="form.model == b ? customStyle : ''">{{ b }}</u-button>
					</view>
					<view v-else-if="item.type == 'number'" class="fcc" :class="[item.type]">
						<u-number-box disabled-input :min="item.min ? item.min : 999" v-model="form.minNUm"></u-number-box>
					</view>
					<view v-else-if="item.type == 'orderQuantity'" class="fcc" :class="[item.type]">
						数量
						<u-number-box disabled-input v-model="form.value3" style="margin: 0 20rpx;"></u-number-box>
						金额 4 元
					</view>
					<view v-else-if="item.type == 'day'" class="fcc" :class="[item.type]">
						天数 
						<view class="input fcc">
							<view class="n">
								{{ form.value1 }}
							</view>
							<u-icon name="arrow-down" size="24"></u-icon>
						</view>
						金额 150 元
					</view>
					<view v-else-if="item.type == 'text'" :class="[item.type]">
						商品：1 数量：5
					</view>
					<view v-else-if="item.type == 'select'" :class="[item.type]">
						<view class="input fcs">
							<view class="n">
								上午
							</view>
							<u-icon name="arrow-down" size="24"></u-icon>
						</view>
					</view>
					<view v-else-if="item.type == 'date'" :class="[item.type]">
						<view class="fcc">
							<view class="input fcc">
								2024-05-05
							</view>
							<view class="t">
								至
							</view>
							<view class="input fcc">
								2024-05-05
							</view>
						</view>
					</view>
					<view v-if="item.tip" class="tip">
						{{ item.tip }}
					</view>
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="detail">
			<view class="title">
				商品详情
			</view>
			<view class="textarea">
				<image class="img" src="https://img.js.design/assets/img/668cd2d35b7cc4dddddf8505.png#992ee366fd721768799b00ce4530503f" mode="widthFix"></image>
			</view>
		</view>
		<!-- 购物车 -->
		<view class="navigation">
			<view class="left">
				<view class="item">
					<image class="img" src="@/static/img/tohome.png" mode="widthFix"></image>
					<view class="text u-line-1">首页</view>
				</view>
				<view class="item">
					<image class="img" src="@/static/img/toservice.png" mode="widthFix"></image>
					<view class="text u-line-1">客服</view>
				</view>
				<!-- <view class="item car">
					<u-badge class="car-num" :count="9" type="error" :offset="[-3, -6]"></u-badge>
					<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">购物车</view>
				</view> -->
			</view>
			<view class="right">
				<view class="cart btn u-line-1">加入购物车</view>
				<view class="buy btn u-line-1" @click="toPath('/pages/order/submit')">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chooseGoodsIndex: 0,
				form: {
					value: 0,
					value1: 30,
					model: '天天送',
					minNUm: 2
				},
				customStyle: {
					backgroundColor: '#F3060D',
					color: '#FFF',
				},
				distribution: [
					{
						label: '配送地址',
						type: 'address',
					},
					{
						label: '配送方式',
						type: 'button',
						button: ['商家配送', '自提']
					},
					{
						label: '配送模式',
						type: 'button',
						button: ['天天送', '隔日送', '工作日送'],
						tip: '每天都配送'
					},
					{
						label: '每天配送数量',
						type: 'number',
						min: 2 
					},
					{
						label: '订购数量',
						type: 'orderQuantity',
					},
					{
						label: '开卡',
						type: 'day',
					},
					{
						label: '赠品数量',
						type: 'text',
						tip: '先配送商品，后配送赠品，若退款不享受赠品'
					},
					{
						label: '配送时间',
						type: 'select'
					},
					{
						label: '配送日期',
						type: 'date'
					}
				],
				bannerList: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			};
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '商品详情'
			})
		},
		methods: {
			toPath(path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.navigation {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 100rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 30rpx 46rpx;
	position: fixed;
	bottom: 0;
	width: 100%;
	.left {
		display: flex;
		font-size: 20rpx;
		.item {
			margin: 0 55rpx 0 0;
			.img {
				width: 37rpx;
			}
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}
		.cart {
			background-color: #FDA215;
			margin-right: 30rpx;
		}
		.buy {
			background-color: #F3060D;
		}
	}
}
.detail {
	padding: 0 20rpx 100rpx;
	background-color: #FFF;
	margin-top: 20rpx;
	.img {
		width: 100%;
	}
	.title {
		font-size: 28rpx;
		color: #383838;
		font-weight: 500;
		padding: 23rpx 0;
	}
}
.distribution {
	padding: 0 20rpx;
	background-color: #FFF;
	margin-top: 20rpx;
	.item {
		padding: 24rpx 0;
		border-bottom: 1rpx solid #D8D8D8;
		.l {
			font-size: 24rpx;
			font-weight: 500;
			color: #808080;
		}
		.r {
			.date {
				.t {
					font-size: 20rpx;
					color: #383838;
					font-weight: 500;
					margin: 0 18rpx;
				}
				.input {
					width: 200rpx;
					height: 45rpx;
					padding: 0 20rpx;
					border-radius: 10rpx;
					border: 1rpx solid #c0c4cc;
					font-size: 20rpx;
					color: #383838;
					font-weight: 500;
				}
			}
			.select {
				.input {
					width: 320rpx;
					height: 45rpx;
					padding: 0 20rpx;
					border-radius: 10rpx;
					border: 1rpx solid #c0c4cc;
					font-size: 20rpx;
					color: #383838;
					font-weight: 500;
				}
			}
			.text {
				font-size: 24rpx;
				color: #383838;
				font-weight: 500;
				text-align: right;
			}
			.day {
				.input {
					height: 45rpx;
					border: 1rpx solid #c0c4cc;
					margin: 0 20rpx;
					padding: 0 20rpx;
					width: 140rpx;
					border-radius: 10rpx;
					.n {
						margin-right: 20rpx;
					}
				}
			}
			.orderQuantity, .day {
				color: #808080;
				font-size: 24rpx;
				font-weight: 500;
			}
			.tip {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 20rpx;
				font-weight: 400;
				color: #A6A6A6;
				margin-top: 13rpx;
			}
			::v-deep .u-btn {
				margin-left: 20rpx;
			}
			.address {
				font-size: 24rpx;
				font-weight: 500;
				color: #383838;
				.img {
					width: 35rpx;
				}
				.t {
					margin: 0 8rpx;
				}
			}
		}
	}
}
.goods {
	margin-top: 20rpx;
	padding: 18rpx 17rpx;
	box-sizing: border-box;
	background-color: #FFF;
	white-space:nowrap;
	.item {
		width: 140rpx;
		display: inline-block;
		margin-right: 20rpx;
		.title {
			width: 140rpx;
			text-align: center;
			font-size: 20rpx;
			color: #A6A6A6;
			font-weight: 500;
			margin-top: -5rpx;
			padding-bottom: 10rpx;
		}
		.img {
			width: 140rpx;
			height: 140rpx;
		}
	}
	.item:last-child {
		margin-right: 0;
	}
}
.milk-station {
	background-color: #FFF;
	width: 100%;
	height: 130rpx;
	padding: 23rpx 20rpx;
	box-sizing: border-box;
	.b {
		margin-top: 17rpx;
		.img {
			height: 35rpx;
		}
		.l {
			font-size: 20rpx;
			color: #A6A6A6;
			font-weight: 500;
		}
	}
	.t {
		.r {
			font-size: 20rpx;
			color: #808080;
			font-weight: 500;
		}
		.l {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}
	}
}
</style>
